<template>
  <div>
    <el-form ref="orderRef" :inline="true" :model="orderCl.orderS" class="demo-form-inline">
      <el-row :gutter="10" class="row-bg">
        <el-col :span="6">
          <el-form-item label="订单编号" prop="code">
            <el-input v-model="orderCl.orderS.code" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品类型" prop="goodsTypeId">
            <el-cascader v-model="orderCl.orderS.goodsTypeId" :options="orderCl.goodsTypes" :props="orderCl.props" clearable :show-all-levels="false" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品名称" prop="goodsName">
            <el-input v-model="orderCl.orderS.goodsName" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="订单类型" prop="type">
            <el-select v-model="orderCl.orderS.type">
              <el-option v-for="item in orderCl.orderTypes" :key="item" :label="item.desc" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="订单状态" prop="orderState">
            <el-select v-model="orderCl.orderS.orderState">
              <el-option v-for="item in orderCl.orderStates" :key="item" :label="item.desc" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="订单来源" prop="orderResource">
            <el-select v-model="orderCl.orderS.orderResource">
              <el-option v-for="item in orderCl.orderResources" :key="item" :label="item.desc" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="支付方式" prop="payWay">
            <el-select v-model="orderCl.orderS.payWay">
              <el-option v-for="item in orderCl.payWays" :key="item" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="search()">搜索</el-button>
            <el-button type="primary" @click="reset(goodsBrandRef)">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div>
    <el-table :data="orderCl.orderTable" stripe style="width: 100%">
      <el-table-column align="center" label="序号" type="index" width="80">
        <template #default="scope">
          {{ (orderCl.orderS.page - 1) * orderCl.orderS.size + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="订单编号" prop="code" />
      <el-table-column align="center" header-align="center" label="价格" prop="price" />
      <el-table-column align="center" header-align="center" label="折扣价格" prop="discountPrice" />
      <el-table-column align="center" label="订单类型">
        <template #default="scope">
          {{ scope.row.type.desc }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单状态">
        <template #default="scope">
          {{ scope.row.orderState.desc }}
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="创建事件" prop="createTime" />
      <el-table-column align="center" fixed="right" header-align="center" label="操作" width="220">
        <template #default="scope">
          <el-button link size="small" type="primary" @click="getDetail(scope.row.code)">详情 </el-button>
          <!-- <el-popconfirm title="确定要删除吗?" @confirm="deleteGoods(scope.row.id)">
            <template #reference>
              <el-button link type="primary">删除</el-button>
            </template>
          </el-popconfirm> -->
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-dialog v-model="orderCl.openDialog" destroy-on-close title="订单详情">
      <el-container>
        <el-aside width="200px">
          <el-row :gutter="10" class="row-bg">
            <el-col :span="6"> "订单编号：" </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <el-row :gutter="10" class="row-bg">
            <el-col :span="6"> "产品名称：" </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-dialog>
  </div>
  <Page :pageData="orderCl.orderS" @selectPage="search"></Page>
</template>
<script setup lang="ts">
import { orderClass } from '@/page/types/sale/order'
import { getEnumList, selectGoodsTypes, getOrderPage, getOrderInfoByCode } from '@/api/sale'
import { getPaySelect } from '@/api/pay'

const orderRef = ref()
const orderCl = reactive(new orderClass())
onMounted(() => {
  searchEnumList()
  search()
})

const searchEnumList = async () => {
  const orderType = await getEnumList('order.OrderTypeEnum')
  const orderState = await getEnumList('order.OrderStateEnum')
  const orderSource = await getEnumList('order.OrderSourceEnum')
  const payWays = await getPaySelect()
  const goodsType = await selectGoodsTypes()
  orderCl.orderTypes = orderType.data
  orderCl.orderStates = orderState.data
  orderCl.orderResources = orderSource.data
  orderCl.payWays = payWays.data
  orderCl.goodsTypes = goodsType.data
}
const search = () => {
  getOrderPage(orderCl.orderS).then(res => {
    orderCl.orderTable = res.data.records
    orderCl.orderS.page = res.data.current
    orderCl.orderS.size = res.data.size
    orderCl.orderS.total = res.data.total
  })
}
const getDetail = (code: string) => {
  orderCl.openDialog = true
  // getOrderInfoByCode(code).then(res => {

  //   orderCl.orderDetail = res.data
  // })
}
</script>
<style scoped lang="scss">
.el-select {
  width: 240px;
}
</style>
